<template>
  <div>
    <Nav />
    <div id="app" class="wrapper" style="padding-top: 10px">
      <div class="p-content">
        <div>wff</div>
        <div class="m-post">
          <form id="travelForm">
            <div class="post-tab clearfix">
              <input type="hidden" name="orderType" id="orderType" value="1" />
              <div :class="[switchNum ? 'tab-item' : 'tab-item  on']">
                <a
                  href="javascript:;"
                  class="orderBy"
                  style="margin-right: 20px"
                  @click="switchNewest()"
                  >最新游记</a
                >
              </div>
              <div :class="[switchNum ? 'tab-item  on' : 'tab-item']">
                <a href="javascript:;" class="orderBy" @click="switchHot()"
                  >最热游记</a
                >
              </div>
            </div>
            <div class="navbar-sub clearfix">
              人均花费：
              <select
                name="perExpendType"
                class="com-opt"
                v-model="pay"
                @change="changeSelect()"
              >
                <option value="-1">不限</option>
                <option value="1">1-999</option>
                <option value="2">1K-6K</option>
                <option value="3">6K-20K</option>
                <option value="4">20K以上</option>
              </select>

              出行天数：
              <select
                name="dayType"
                class="com-opt"
                v-model="day"
                @change="changeSelect()"
              >
                <option value="-1">不限</option>
                <option value="1">3天以下</option>
                <option value="2">4-7天</option>
                <option value="3">8-14天</option>
                <option value="4">15天以上</option>
              </select>
              <div class="tn-write">
                <a href="javascript:void(0);" class="btn-add"><i></i>写游记</a>
              </div>
            </div>
          </form>
          <div class="_notelist">
            <div class="post-list">
              <ul>
                <li
                  class="post-item clearfix"
                  v-for="item in travelDiaryData"
                  :key="item.id"
                  @click="toDetail(item.id)"
                >
                  <div class="post-cover">
                    <a href="javascript:void(0);"
                      ><img
                        width="215"
                        height="135"
                        :src="item.coverUrl"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <div class="post-ding">
                    <span id="topvote11710590">{{ item.thumbsupnum }}</span
                    ><a
                      href="javascript:;"
                      data-japp="articleding"
                      data-iid="11710590"
                      data-vote="2067"
                      class="btn-ding"
                      >顶</a
                    >
                  </div>
                  <h2 class="post-title yahei hasxjicon">
                    <a href="javascript:;" class="title-link">{{
                      item.title
                    }}</a>
                  </h2>
                  <div class="post-author">
                    <span class="author"
                      ><a href="javascript:;" rel="nofollow"
                        ><img
                          src="../assets/images/default.jpg"
                          width="15px"
                          class="lazy"
                          style="display: inline"
                      /></a>
                      作者：<a href="javascript:;" rel="nofollow"
                        >dafei</a
                      ></span
                    >
                  </div>
                  <div class="post-content">
                    {{ item.summary }}
                  </div>
                  <span class="status"
                    ><i class="icon_view"></i>{{ item.viewnum
                    }}<i class="icon_comment"></i>{{ item.replynum }}</span
                  >
                </li>
              </ul>
            </div>
            <div style="float: right">
              <!-- <div style="float: left;"><span style="line-height: 30px;"> 共2页 / 16条&nbsp;&nbsp;&nbsp;</span></div> -->
              <div
                id="pagination"
                class="jq-pagination"
                style="display: inline"
              >
                <a
                  class="prev disabled"
                  href="javascript:void(0);"
                  jp-role="prev"
                  jp-data="0"
                  @click="
                    () => {
                      changePage(-1);
                    }
                  "
                  >上一页</a
                ><a
                  href="javascript:void(0);"
                  jp-role="page"
                  jp-data="1"
                  class="active"
                  >{{ page }}</a
                >
                <!-- <a href="javascript:void(0);" jp-role="page" jp-data="2">2</a> -->
                <a
                  class="next"
                  href="javascript:void(0);"
                  jp-role="next"
                  jp-data="2"
                  @click="
                    () => {
                      changePage(1);
                    }
                  "
                  >下一页</a
                >
                <!-- <a class="last" href="javascript:void(0);" jp-role="last" jp-data="2">尾页</a> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-aside">
        <div class="p-top1 clearfix">
          <div class="hd">
            <h2><i></i>旅游攻略</h2>
          </div>
          <ol>
            <li class="top3">
              <em class="rank-num">1</em>
              <strong><a href="javascript:;" target="_blank">北海道</a></strong>
              <a href="javascript:;" target="_blank">在皑皑白雪中泡温泉</a>
            </li>
            <li class="top3">
              <em class="rank-num">2</em>
              <strong><a href="javascript:;" target="_blank">北海道</a></strong>
              <a href="javascript:;" target="_blank">在皑皑白雪中泡温泉</a>
            </li>
            <li class="top3">
              <em class="rank-num">3</em>
              <strong><a href="javascript:;" target="_blank">北海道</a></strong>
              <a href="javascript:;" target="_blank">在皑皑白雪中泡温泉</a>
            </li>
            <li>
              <em class="rank-num">4</em>
              <strong><a href="javascript:;" target="_blank">北海道</a></strong>
              <a href="javascript:;" target="_blank">在皑皑白雪中泡温泉</a>
            </li>
            <li>
              <em class="rank-num">5</em>
              <strong><a href="javascript:;" target="_blank">北海道</a></strong>
              <a href="javascript:;" target="_blank">在皑皑白雪中泡温泉</a>
            </li>
          </ol>
        </div>
        <div class="m-box m-comm">
          <div class="hd">
            <h2><i></i>最新游记动态</h2>
          </div>
          <div class="bd">
            <ul
              id="_j_new_action_list"
              style="height: auto; overflow: hidden"
            ></ul>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import Footer from "@/components/Footer.vue";
import { ApiTravelDiaryData, ApiTravelDiaryList } from "@/request/api";
export default {
  data() {
    return {
      // 数据列表
      travelDiaryData: [],
      // 当前页数
      page: 1,
      // 游记切换
      switchNum: false,
      // 人均花费
      pay: -1,
      // 出行天数
      day: -1,
    };
  },
  components: {
    Nav,
    Footer,
  },
  created() {
    // 页数重置到1
    this.page = 1;
    //首页最新发表数据
    this.getTravelDiaryData(2, this.page);
  },
  methods: {
    // 封装首页热门最新数据
    async getTravelDiaryData(r, z) {
      //首页热门游记数据
      let res = await ApiTravelDiaryData(r, z);
      this.travelDiaryData = res.data.data.content;
    },
    //热门游记
    switchHot() {
      //显示热门
      this.switchNum = true;
      // 页数重置到1
      this.page = 1;
      //首页热门游记数据
      this.getTravelDiaryData(1, this.page);
    },
    //最新发表
    switchNewest() {
      //显示最新
      this.switchNum = false;
      // 页数重置到1
      this.page = 1;
      //首页最新发表数据
      this.getTravelDiaryData(2, this.page);
    },
    // 修改下拉框值
    async changeSelect() {
      if (this.switchNum) {
        // 页数重置到1
        this.page = 1;
        let res = await ApiTravelDiaryList(1, this.page, this.pay, this.day);
        this.travelDiaryData = res.data.data.content;
      } else {
        // 页数重置到1
        this.page = 1;
        let res = await ApiTravelDiaryList(2, this.page, this.pay, this.day);
        this.travelDiaryData = res.data.data.content;
      }
    },
    // 切换页面
    async changePage(val) {
      if (this.switchNum) {
        let res = await ApiTravelDiaryList(
          1,
          (this.page += val),
          this.pay,
          this.day
        );
        this.travelDiaryData = res.data.data.content;
      } else {
        let res = await ApiTravelDiaryList(
          2,
          (this.page += val),
          this.pay,
          this.day
        );
        this.travelDiaryData = res.data.data.content;
      }
    },
    toDetail(id) {
      this.$router.push({
        path: "/traveldetail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style>
.wrapper {
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.p-content {
  float: left;
  width: 680px;
}

a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.post-tab {
  margin-bottom: 10px;
}

.post-tab .tab-item {
  float: left;
  font-size: 16px;
  color: #333;
  line-height: 42px;
}

.post-tab .tab-item > a {
  color: #333;
}

.post-tab .tab-item.on > a {
  color: #ff9d00;
}

.m-post .navbar-sub {
  height: 28px;
  margin-bottom: 15px;
}

.tn-dropdown {
  float: left;
  width: 120px;
  display: inline;
  margin-right: 5px;
  line-height: 28px;
  color: #666;
  position: relative;
}

.tn-write {
  float: right;
  margin: -5px 0 0 15px;
  width: 140px;
  line-height: 36px;
}

.tn-write .btn-add {
  display: block;
  height: 36px;
  background-color: #ff9d00;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  font-size: 16px;
}

.tn-write .btn-add i {
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 17px;
  background-image: url(../assets/images/index-sprites3.png);
  background-position: 0 0;
  overflow: hidden;
  vertical-align: -3px;
}

.tn-dropdown .dropdown-trigger {
  padding: 0 13px;
  height: 28px;
  position: relative;
  z-index: 2;
  line-height: 28px;
  cursor: pointer;
}

.tn-dropdown .icon-dropdown {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 12px;
  height: 6px;
  background-image: url(../assets/images/index-sprites3.png);
  background-position: 0 -30px !important;
  overflow: hidden;
}

.tn-dropdown .dropdown-menu {
  position: absolute;
  top: 0;
  border: 1px solid #d6d6d6;
  padding-top: 26px;
  width: 118px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
}

.tn-dropdown .dropdown-menu ul {
  display: none;
}

.tn-dropdown .dropdown-menu li {
  margin: 1px 0;
  height: 28px;
}

.tn-dropdown .dropdown-menu a {
  display: block;
  padding: 0 12px;
  color: #666;
  cursor: pointer;
}

.tn-dropdown.dropdown-open .dropdown-menu ul {
  display: block;
  margin: 6px 0;
  height: 240px;
}

.tn-dropdown.dropdown-open .icon-dropdown {
  background-position: -30px -30px !important;
}

.tn-dropdown.dropdown-open {
  z-index: 5;
}

.tn-dropdown.dropdown-open .dropdown-trigger {
  color: #ff9d00;
}

.tn-dropdown.dropdown-open .dropdown-menu {
  border-color: #ff9d00;
}

.post-list ul .post-item:first-child {
  border-top: 0;
}

.post-item {
  padding: 22px 0 23px;
  border-bottom: 1px dashed #cecece;
  position: relative;
}

.post-item .post-cover {
  position: relative;
}

.post-item .post-cover {
  display: inline;
  float: left;
  margin-right: 20px;
  width: 215px;
  height: 135px;
  background-color: #f2f2f2;
}

.post-item a {
  color: #ff7200;
}

.post-item .post-ding {
  display: inline;
  float: right;
  padding-bottom: 24px;
  width: 55px;
  margin: -5px 0 0 5px;
  line-height: 20px;
  color: #fa0;
  font-size: 14px;
  position: relative;
}

.post-item .post-ding span {
  position: absolute;
  left: 0;
  width: 55px;
  margin-top: 38px;
  text-align: center;
}

.post-item .post-ding span,
.post-item .status {
  font-family: Verdana, Geneva, sans-serif;
}

.post-item .post-ding .btn-ding {
  display: block;
  margin: 0 auto;
  width: 38px;
  height: 34px;
  background: url(../assets/images/mdd_sprite8.png) no-repeat -150px -30px;
  overflow: hidden;
  line-height: 100px;
  vertical-align: -10px;
}

.post-item .post-title {
  height: 27px;
  line-height: 25px;
  font-size: 20px;
  font-weight: normal;
}

.m-post .bzicon {
  background-position: -100px -50px;
}

.post-item .post-title a.xjicon,
.m-post .bzicon,
.m-post .fsicon {
  display: block;
  width: 62px;
  height: 35px;
  float: left;
  margin: -4px 8px 0 0;
  /* background: url(../assets/images/notes-medal3.png) no-repeat -100px -100px; */
  overflow: hidden;
  line-height: 200px;
}

.post-item .post-author {
  margin: 8px 0;
  height: 20px;
  color: #a8a8a8;
  overflow: hidden;
}

.author {
  margin: 5px 0;
  line-height: 25px;
}

.post-item .last-comment {
  margin-left: 20px;
}

.author a {
  color: #ff7200;
}

.post-item a {
  color: #ff7200;
}

.post-item .post-author img {
  margin-right: 5px;
  vertical-align: text-bottom;
}

.post-item .comment-date {
  margin-left: 5px;
}

.post-item .post-title a.title-link {
  display: inline-block;
  height: 25px;
  overflow: hidden;
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.post-item .post-content {
  height: 48px;
  margin: 8px 0;
  font-size: 12px;
  line-height: 24px;
  overflow: hidden;
}

.post-item .status {
  color: #a8a8a8;
}

.post-item .status i {
  display: inline-block;
  margin: 0 3px 0 15px;
  width: 19px;
  height: 15px;
  background: url(../assets/images/mdd_sprite8.png) no-repeat;
  overflow: hidden;
  vertical-align: text-bottom;
}

.post-item .status .icon_view {
  margin-left: 5px;
  background-position: 0 -15px;
}

.post-item .status .icon_comment {
  width: 16px;
  height: 14px;
  background-position: -20px -15px;
}

.p-aside {
  float: right;
  margin-top: -5px;
  width: 260px;
}

.p-aside .p-top1 ol {
  /* position: absolute; */
  z-index: 2;
  /* padding: 15px 10px; */
  width: 260px;
  line-height: 30px;
}

.p-aside .p-top1 li {
  height: 30px;
  overflow: hidden;
}

.p-aside .p-top1 .rank-num {
  float: left;
  width: 30px;
  font-size: 20px;
  font-family: Letter Gothic Std, Verdana, Geneva, sans-serif;
  /* text-align: right; */
  color: #aaa;
  font-weight: bold;
}

.p-aside .p-top1 .top3 .rank-num,
.p-aside .p-top1 .top3 strong a {
  color: #ffa800;
}

.p-aside .p-top1 strong {
  padding: 0 15px;
  font-size: 14px;
  font-weight: normal;
  color: #666;
}

.p-aside .p-top1 a {
  color: #999;
}

.p-aside .p-top1 strong a {
  color: #666;
}

.p-aside .p-top1 .top3 .rank-num,
.p-aside .p-top1 .top3 strong a {
  color: #ffa800;
}

.p-aside .p-top1 .hd {
  margin-top: 20px;
  height: 30px;
  /* margin-bottom: 12px; */
  font-size: 16px;
  color: #666;
  line-height: 30px;
}

.p-aside .p-top1 .hd h2 {
  font-weight: normal;
  font-size: 16px;
}

.p-aside .p-top1 .hd i {
  float: left;
  margin: 7px 10px 0 0;
  width: 19px;
  height: 18px;
  background: url(../assets/images/poi-listBg10.png) no-repeat -110px -125px;
  overflow: hidden;
}

.m-box {
  margin-bottom: 50px;
}

.m-comm .hd {
  margin-top: 20px;
  margin-bottom: 10px;
}

.m-comm .hd h2 {
  font-weight: normal;
}

.m-comm .hd i {
  float: left;
  margin: 7px 10px 0 0;
  width: 19px;
  height: 18px;
  background: url(../assets/images/poi-listBg10.png) no-repeat -110px -125px;
  overflow: hidden;
}

.m-comm .bd ul {
  position: relative;
  overflow: hidden;
}

.m-comm li {
  margin: 10px 0 20px 42px;
  padding: 10px 12px;
  position: relative;
  background-color: #f8f8f8;
  line-height: 20px;
  color: #7f7f7f;
  border-radius: 3px;
}

.m-comm li a {
  color: #f57000;
}

.m-comm li img {
  float: left;
  margin: -10px 0 0 -54px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: relative;
}

.tn-write .btn-add:hover {
  text-decoration: none;
  background-color: #ff8a00;
}

.tn-dropdown .dropdown-menu a:hover,
.tn-dropdown .dropdown-menu .active {
  background-color: #eee;
  text-decoration: none;
}
</style>
